<template>

    <button @click="changeNode">修改节点颜色事件</button>

    <h2>添加自定义形状</h2>

    <div id="chart-diagram" style="background-color: whitesmoke; width: 1000px; height: 1000px;">
    </div>


</template>

<script setup>
    import {onMounted} from 'vue';
    import go from "gojs";

    let myDiagram = null;


    const changeNode = () => {
        var data = myDiagram.model.findNodeDataForKey("Delta");
        // 这个方式可以更新
        if (data !== null) myDiagram.model.setDataProperty(data, "color", "red");
    }

    const  getPorts = () =>
        {
            return [    // for each node specify the location using Point values
                {key: "p1", category: "nodeStyletwo", text: '1', color: "lightblue", loc: new go.Point(300, 80)},
                {key: "p2", category: "nodeStyletwo", text: '2', color: "pink", loc: new go.Point(300, 200)},
                {key: "p3", category: "nodeStyletwo", text: '3', color: "pink", loc: new go.Point(420, 200)},
                {key: "p4", category: "nodeStyletwo", text: '4', color: "pink", loc: new go.Point(550, 200)},
                {key: "p5", category: "nodeStyletwo", text: '5', color: "pink", loc: new go.Point(660, 200)},
                {key: "p6", category: "nodeStyletwo", text: '6', color: "pink", loc: new go.Point(770, 200)},
                {key: "p7", category: "nodeStyletwo", text: '7', color: "pink", loc: new go.Point(770, 80)},
                {key: "p8", category: "nodeStyletwo", text: '8', color: "pink", loc: new go.Point(770, -15)},
                {key: "p9", category: "nodeStyletwo", text: '9', color: "pink", loc: new go.Point(770, -135)},
                {key: "p10", category: "nodeStyletwo", text: '10', color: "pink", loc: new go.Point(660, -135)},
                {key: "p11", category: "nodeStyletwo", text: '11', color: "pink", loc: new go.Point(550, -135)},
                {key: "p12", category: "nodeStyletwo", text: '12', color: "pink", loc: new go.Point(420, -135)},
                {key: "p13", category: "nodeStyletwo", text: '13', color: "pink", loc: new go.Point(300, -135)},
                {key: "p14", category: "nodeStyletwo", text: '14', color: "pink", loc: new go.Point(300, -15)},

                {key: "p15", category: "nodeStyletwo", text: 'D1', color: "pink", loc: new go.Point(400, 350)},
                {key: "p16", category: "nodeStyletwo", text: 'D2', color: "pink", loc: new go.Point(520, 350)},

                {key: "p17", category: "nodeStyletwo", text: '', color: "pink", loc: new go.Point(550, -250)},
                {key: "p18", category: "nodeStyletwo", text: '', color: "pink", loc: new go.Point(420, -250)},
                {key: "p19", category: "nodeStyletwo", text: '', color: "pink", loc: new go.Point(300, -250)},

                {key: "p20", category: "nodeStyletwo", text: '', color: "pink", loc: new go.Point(520, 300)},
                {key: "p21", category: "nodeStyletwo", text: '', color: "pink", loc: new go.Point(550, -250)},
                {key: "p22", category: "nodeStyletwo", text: '', color: "pink", loc: new go.Point(420, -250)},
                {key: "p23", category: "nodeStyletwo", text: '', color: "pink", loc: new go.Point(300, -250)}

            ];
        }

        const  getSecondTemplate =($)=>{
            return $(go.Node, "Auto",
                {
                    movable: false,//是否可拖动
                    deletable: false,//是否可删除
                    avoidable: true,
                    selectionAdorned: false,//不显示选中框
                },
                new go.Binding("location", "loc"),  // get the Node.location from the data.loc value
                $(go.Shape,
                    "Circle",
                    {
                        fill: "white",
                        width: 30,
                        height: 30,
                        alignment: go.Spot.Top, //规定锚点的位置
                        portId: "topSpot", //规定锚点的名称
                        fromSpot: go.Spot.TopSide, //输出点
                        fromLinkable: true,//是否可以输出
                        toSpot: go.Spot.AllSides, //输入点
                        toLinkable: true, //是否可以输入
                        cursor: "pointer",
                        mouseEnter: function (e, port) {
                            if (!e.diagram.isReadOnly) port.fill = "rgba(255,0,255,0.5)";
                        },
                        mouseLeave: function (e, port) {
                            port.fill = "pink";
                        },
                    },
                    new go.Binding("fill", "color")
                ),
                $(go.TextBlock,
                    {margin: 5},
                    new go.Binding("text", "text"))
            );
        }
    const init = () => {

        const $ = go.GraphObject.make

        myDiagram = new go.Diagram("chart-diagram", {
            'grid.visible': true, // 显示网格
            'clickCreatingTool.archetypeNodeData': {category: 'Normal', text: '新节点', notice: ''}, // 双击新建节点(可以写入节点的默认信息)；；
            'toolManager.hoverDelay': 100, // tooltip提示显示延时
            'toolManager.toolTipDuration': 10000, // tooltip持续显示时间
            allowMove: true, // 允许拖动画板
            allowDragOut: true, // 允许拖拽节点
            allowDelete: true, // 允许删除节点
            allowCopy: true, // 允许复制节点
            allowClipboard: true, // 允许粘贴节点

        });

        myDiagram.nodeTemplateMap.add("nodeStyleOne",
            $(go.Node, "Auto",
                $(go.Shape,
                    {fill: "white", portId: "", fromLinkable: true, toLinkable: true, cursor: "pointer"},
                    new go.Binding("fill", "color")),
                $(go.TextBlock,
                    {margin: 8,},
                    new go.Binding("text", "text")),

                {
                    click: function (node) {// 双击事件
                      //  console.log("======click======", node.data().key)
                        console.log("======click======",node)
                    }

                }
            )
        );


        var CreateNode = {

            key: "123", //设置key的方法，每个节点最好是有自己独立的key

            category: "nodeStyleOne", //节点样式选择 nodeStyleOne  => 你自己定义的样式名

            loc: "",
            text: "节点的text值11111",//也可以是动态的值
            color: '#ff00ff'

        }
        myDiagram.model.addNodeData(CreateNode);


        myDiagram.nodeTemplateMap.add("nodeStyletwo", getSecondTemplate($));


        var SecondNode = [{

            key: "123", //设置key的方法，每个节点最好是有自己独立的key
            category: "nodeStyletwo", //节点样式选择 nodeStyleOne  => 你自己定义的样式名
            loc: "",
            text: "节点的text值",//也阔以是动态的值
            color: '#ff00ff'

        }, {

            key: "123", //设置key的方法，每个节点最好是有自己独立的key
            category: "nodeStyletwo", //节点样式选择 nodeStyleOne  => 你自己定义的样式名
            loc: "",
            text: "节点的text值",//也阔以是动态的值
            color: '#ff00ff'

        },]
        console.log(SecondNode)

        myDiagram.model.addNodeDataCollection(SecondNode);


        myDiagram.model.addNodeDataCollection(getPorts());





        //获取各节点



    };

    onMounted(() => {
        init();
    });


</script>

<style scoped>

</style>